<template>
	<div class="addcus-container">
		<!-- <div class="nav-bar flex">
			<div class="el-icon-arrow-left back" @click="close"></div>
			<div class="navtitle">新增客户</div>
		</div> -->
		<van-nav-bar title="新增客户" left-arrow @click-left="close" />

		<div class="content">
			<div class="form-info">
				<el-form ref="formRuler" label-position="top" :model="form" :rules="rules">
					<div class="com-title flex">
						<div class="com-title__left flex">
							<div class="line"></div>
							<span>客户信息</span>
						</div>
					</div>
					<template>
						<el-form-item label="所属事业部" prop="biz_id">
							<cus-select
								:filt="true"
								:list="business"
								label="biz_name"
								prop="biz_id"
								v-model="form.biz_id"
								placeholder="请选择事业部"
								@change="changeBiz"
								:disabled="repeat"
							/>
						</el-form-item>
						<!-- <el-form-item label="分公司" prop="company_id">
							<cus-select
								:list="companylist"
								label="company_name"
								prop="company_id"
								v-model="form.company_id"
								placeholder="请选择分公司"
							/>
						</el-form-item> -->
						<el-form-item label="品牌" ref="brand" prop="bra_id">
							<cus-select
								:list="bizRefData.brand"
								label="bra_name"
								prop="bra_id"
								v-model="form.bra_id"
								placeholder="请选择品牌"
								@change="changeBra"
							/>
						</el-form-item>

						<el-form-item label="老客户" prop="cus_type" v-if="userInfo.dept_post == 2">
							<cus-select
								:list="cusTypeList"
								v-model="form.cus_type"
								label="label"
								prop="value"
								placeholder="请选择"
							/>
						</el-form-item>
						<el-form-item
							label="首次到店"
							prop="first_shop"
							v-if="userInfo.dept_post == 2 && form.cus_type == 2"
						>
							<cl-date-picker
								prefix-icon="none"
								v-model="form.first_shop"
								value-format="yyyy-MM-dd"
								style="width: 100%"
								placeholder="请选择"
							/>
						</el-form-item>

						<el-form-item
							label="到店次数"
							prop="to_shop"
							v-if="userInfo.dept_post == 2 && form.cus_type == 2"
						>
							<el-input
								v-model.trim="form.to_shop"
								type="number"
								placeholder="请填写到店次数"
							/>
						</el-form-item>

						<el-form-item label="客户姓名" prop="cus_name">
							<div class="item-con flex">
								<el-input
									placeholder="请输入客户姓名"
									v-model="form.cus_name"
									maxlength="30"
									:disabled="repeat"
								/>
							</div>
						</el-form-item>
						<el-form-item
							label="手机号（有预约项目时必填）"
							prop="cus_mobile"
							:rules="repeat ? [] : rules.cus_mobile"
							:required="form.has_appoint == 1"
						>
							<div class="item-con flex">
								<el-input
									placeholder="请输入客户手机号"
									maxlength="11"
									v-model.trim="form.cus_mobile"
									:disabled="repeat"
								/>
							</div>
						</el-form-item>
						<el-form-item
							label="微信号"
							prop="cus_wx"
							:rules="repeat ? [] : rules.cus_wx"
						>
							<div class="item-con flex">
								<el-input
									placeholder="请输入客户微信号"
									maxlength="30"
									v-model.trim="form.cus_wx"
									:disabled="repeat"
								/>
							</div>
						</el-form-item>
						<el-form-item
							label="预约门店（有预约项目时必填）"
							prop="dept_id"
							:required="form.has_appoint == 1"
						>
							<choice-shop
								placeholder="请选择预约门店"
								:biz_id="form.biz_id"
								v-model="form.dept_id"
								only-open
							/>
						</el-form-item>
						<el-form-item
							label="加微时间（用于每日加微统计）"
							prop="wechat_join_day"
							:required="!!form.cus_wx"
						>
							<cus-time
								:filt="true"
								v-model="form.wechat_join_day"
								type="date"
								placeholder="请选择加微时间"
							/>
						</el-form-item>
						<el-form-item
							label="加微方式"
							prop="id_join_type"
							:required="!!form.cus_wx"
						>
							<cus-select
								:list="wxJoinTypeList"
								label="label"
								prop="value"
								v-model="form.id_join_type"
								placeholder="请选择加微方式"
							/>
						</el-form-item>
						<template v-if="form.id_join_type == 99">
							<el-form-item label="来源渠道(加微方式为其他时选择)" prop="source_id">
								<cus-select
									:list="sourceList"
									label="cname"
									prop="id"
									v-model="form.source_id"
									placeholder="请选择来源渠道"
								/>
							</el-form-item>
							<template v-if="form.source_id == 798">
								<el-form-item label="来源会员号" prop="from_cus_id">
									<el-input
										v-model.trim="form.from_cus_id"
										placeholder="请填写介绍人会员号"
									/>
								</el-form-item>
							</template>
						</template>
						<!-- <el-form-item label="是否转介绍" prop="share_type">
							<cus-select
								filt
								:list="introduceList"
								label="label"
								prop="value"
								v-model="form.share_type"
								placeholder="请选择是否转介绍"
								:disabled="repeat"
							/>
						</el-form-item> -->
						<!-- <el-collapse-transition>
							<div v-if="showMore">
								<el-divider />
								<el-form-item label="会员等级" prop="cus_grade">
									<cus-select
										filt
										:list="bizRefData.level"
										label="cl_name"
										prop="cl_id"
										v-model="form.cus_grade"
										placeholder="请选择会员等级"
									/>
								</el-form-item>
								<el-form-item label="会员性别" prop="cus_sex">
									<cus-select
										filt
										:list="sexList"
										label="label"
										prop="value"
										v-model="form.cus_sex"
										placeholder="请选择会员性别"
									/>
								</el-form-item>
								<el-form-item label="会员生日" prop="cus_birthday">
									<cus-time
										:fixation="false"
										placeholder="请选择会员生日"
										v-model="form.cus_birthday"
										type="date"
									/>
								</el-form-item>
								<el-form-item label="所在地区" prop="area">
									<zm-area v-model="form.area" placeholder="请选择省市区" />
								</el-form-item>
								<el-form-item label="详细地址" prop="cus_addr">
									<div class="item-con flex">
										<el-input
											placeholder="请填写详细地址"
											v-model="form.cus_addr"
										/>
									</div>
								</el-form-item>
								<el-form-item label="会员备注" prop="add_remarks">
									<div class="item-con">
										<el-input
											v-model="form.add_remarks"
											placeholder="请填写会员备注"
											type="textarea"
											:rows="3"
										/>
									</div>
								</el-form-item>
							</div>
						</el-collapse-transition> -->
						<!-- <div class="flex flex-justify-center">
							<el-button type="text" @click="showMore = !showMore">
								{{ showMore ? "收起" : "展示更多" }}
								<i :class="[`el-icon-arrow-${showMore ? 'up' : 'down'}`]" />
							</el-button>
						</div> -->

						<!-- <template v-if="form.share_type != 0">
							<el-form-item label="客户分享凭证" prop="share_data">
								<cl-upload
									multiple
									:size="50"
									:limit="3"
									:limit-size="3"
									list-type="picture-card"
									ref="uploads"
									v-model="form.share_data"
								/>
								<div class="place"></div>
							</el-form-item>
						</template> -->
					</template>
					<template v-if="!repeat">
						<!-- <el-form-item prop="has_appoint">
							<div class="com-title flex pad-top">
								<div class="com-title__left flex">
									<div class="line"></div>
									<span>预约信息</span>
								</div>
								<div class="com-title__right">
									<el-switch
										v-model="form.has_appoint"
										:inactive-value="0"
										:active-value="1"
										@change="hasAppointChange"
									/>
								</div>
							</div>
						</el-form-item> -->
						<template v-if="form.has_appoint">
							<el-form-item
								label="是否预约到店"
								prop="appoint_info.appoint_arrive"
								required
							>
								<cus-select
									:filt="true"
									:list="reservList"
									label="label"
									prop="value"
									v-model="form.appoint_info.appoint_arrive"
									placeholder="请选择是否预约到店"
								/>
							</el-form-item>
							<template v-if="form.appoint_info.appoint_arrive">
								<el-form-item label="到店时间" prop="appoint_info.appoint_date">
									<cus-time
										:minTime="new Date()"
										v-model="form.appoint_info.appoint_date"
										type="datetime"
										valueFormat="YYYY-MM-DD HH:mm"
										placeholder="请选择到店时间"
									/>
								</el-form-item>
								<el-form-item label="预约时长" prop="appoint_info.cart_duration">
									<cus-select
										filt
										:list="timeList"
										label="label"
										prop="value"
										v-model="form.appoint_info.cart_duration"
										placeholder="请选择是否指定预约时间"
									/>
								</el-form-item>
							</template>
							<el-form-item label="预约内容" required prop="appoint_info.items">
								<div class="reserv">
									<div
										class="reserv-item flex"
										v-for="(item, index) in form.appoint_info.items"
										:key="index"
									>
										<div class="reserv-item__left flex">
											<div class="thumb">
												<!-- <img :src="item.picture_url" alt="" /> -->
												<cl-avatar :src="item.picture_url[0]" shape="square" />
											</div>
											<div class="name ellipsis">
												{{ item.si_name }}
											</div>
											<!-- <div class="name">￥{{ item.price }}</div> -->
											<div class="price flex">
												<span>￥</span>
												<input type="text" v-model="item.price" />
											</div>
										</div>
										<div
											class="reserv-item__right flex"
											@click="delService(index)"
										>
											<i class="el-icon-error"></i>
										</div>
									</div>
								</div>
								<div class="add-serve flex" @click="addService">
									<i class="el-icon-plus"></i>
									<span>添加服务</span>
								</div>
							</el-form-item>
						</template>
						<template v-if="form.has_appoint">
							<!-- <el-form-item>
								<div class="com-title flex pad-top">
									<div class="com-title__left flex">
										<div class="line"></div>
										<span>定金信息</span>
									</div>
									<div class="com-title__right">
										<el-switch
											v-model="form.appoint_info.has_deposit"
											:inactive-value="0"
											:active-value="1"
											@change="hasDepositChange"
										/>
									</div>
								</div>
							</el-form-item> -->
							<template v-if="form.appoint_info.has_deposit">
								<el-form-item
									label="下定金日期"
									prop="appoint_info.deposit_info.pay_date"
								>
									<cus-time
										:filt="true"
										placeholder="请选择下定金日期"
										v-model="form.appoint_info.deposit_info.pay_date"
										type="date"
									/>
								</el-form-item>
								<el-form-item
									label="付款方式"
									prop="appoint_info.deposit_info.pay_type"
								>
									<cus-select
										:list="payTypeList"
										label="label"
										prop="value"
										v-model="form.appoint_info.deposit_info.pay_type"
										placeholder="请选择支付方式"
									/>
								</el-form-item>
								<el-form-item
									label="定金金额"
									prop="appoint_info.deposit_info.money"
								>
									<cus-select
										:list="earList"
										label="deposit"
										prop="deposit"
										v-model="form.appoint_info.deposit_info.money"
										placeholder="请选择定金金额"
									/>
								</el-form-item>
								<el-form-item label="定金备注" prop="dep_meno">
									<div class="item-con flex">
										<el-input
											v-model="form.appoint_info.deposit_info.dep_meno"
											placeholder="请填定金备注"
											type="textarea"
											:rows="3"
										/>
									</div>
								</el-form-item>
								<div class="place"></div>
							</template>
						</template>
					</template>
				</el-form>
			</div>
			<el-button type="primary" class="submit" :loading="saving" @click="submit">
				提交
			</el-button>
		</div>
		<reserv-pop
			:biz_id="form.biz_id"
			ref="reservRef"
			@changeSelect="changeSelect"
			:items="form.appoint_info.items"
		/>
	</div>
</template>

<script>
	import { validate } from "@/utils/validate";
	import CusSelect from "./components/cus-select";
	import CusTime from "./components/cus-time";
	import ReservPop from "./components/reserv-pop";
	import constant from "@/constant";
	import dayjs from "dayjs";
	import { NavBar } from "vant";
	import ChoiceShop from "./components/choice-shop";
	import ZmArea from "./components/zm-area";

	const reservList = [
		{ label: "是", value: 1 },
		{ label: "否", value: 0 }
	];
	const introduce = [
		{ label: "无转介绍", value: 0 },
		{ label: "客户转介绍-售前", value: 2 },
		{ label: "客户转介绍-售中", value: 3 },
		{ label: "门店转介绍", value: 4 }
	];
	export default {
		components: {
			CusSelect,
			CusTime,
			ReservPop,
			VanNavBar: NavBar,
			ChoiceShop,
			ZmArea
		},
		data() {
			// 手机号
			const mobileValidator = (rule, value, callback) => {
				const { has_appoint } = this.form;
				if (!has_appoint) {
					return callback();
				}
				if (!value) {
					return callback(new Error("请填写手机号"));
				}
				return callback();
			};
			const isCusWxValidator = (msg) => {
				return (rule, value, callback) => {
					const { cus_wx } = this.form;
					if (!cus_wx) {
						return callback();
					}
					if (!value) {
						return callback(new Error(msg));
					}
					return callback();
				};
			};
			const deptValidator = (rule, value, callback) => {
				const { has_appoint } = this.form;
				if (!has_appoint) {
					return callback();
				}
				if (!value) {
					callback(new Error("请选择门店"));
				}
				return callback();
			};
			return {
				wxJoinTypeList: constant.WX_JOIN_TYPE,
				payTypeList: constant.PAY_TYPE,
				detail: {},
				showMore: false, // 显示更多
				gradeList: [],
				sexList: [
					{ label: "男", value: 1 },
					{ label: "女", value: 2 }
				],
				form: {
					cus_id: "",
					id_join_type: "",
					from_cus_id: "",
					biz_id: "",
					cus_type: 0,
					first_shop: "",
					to_shop: "",
					// company_id: "",
					bra_id: "",
					dept_id: "",
					cus_name: "",
					cus_mobile: "",
					cus_wx: "",
					cus_sex: 2,
					wechat_join_day: dayjs().format("YYYY-MM-DD"),
					share_type: 0,
					source_id: "",
					has_appoint: 0,
					share_data: "",
					cus_grade: "",
					cus_birthday: "",
					area: [],
					cus_addr: "",
					tag_name: [],
					add_remarks: "",
					appoint_info: {
						appoint_arrive: 0,
						appoint_date: "",
						cart_duration: "",
						has_deposit: 0,
						items: [],
						deposit_info: {
							pay_date: dayjs().format("YYYY-MM-DD"),
							pay_type: "",
							money: "",
							deposit_num: "",
							dep_meno: ""
						}
					},
					appoint_time:''
				},
				rules: {
					biz_id: [{ required: true, message: "请选择事业部" }],
					company_id: [{ required: true, message: "请选择分公司" }],
					cus_type: [{ required: true, message: "请选择是否是老客户" }],
					first_shop: [{ required: true, message: "请选择到店时间" }],
					to_shop: [{ required: true, message: "请填写到店次数" }],
					bra_id: [{ required: true, message: "请选择品牌" }],
					cus_name: [{ required: true, message: "请填写客户名" }],
					cus_mobile: [
						{ required: false, message: "请填写手机号" },
						{ validator: mobileValidator },
						{ pattern: validate.mobile, message: "手机号格式不正确" }
					],
					cus_wx: [
						{ required: true, message: "请填写客户微信号" },
						// { min: 6, max: 30, message: "微信号6-30个字数" },
						// { pattern: validate.wechat, message: "格式为字母、下划线或减号，以字母开头" }
					],
					dept_id: [{ validator: deptValidator }],
					wechat_join_day: [
						{ required: false, message: "请选择加微时间" },
						{ validator: isCusWxValidator("请选择加微时间") }
					],
					id_join_type: [
						{ required: false, message: "请选择加微方式" },
						{ validator: isCusWxValidator("请选择加微方式") }
					],
					share_type: [{ required: true, message: "请选择是否转介绍" }],
					source_id: [
						{ required: true, message: "请选择来源渠道" },
						{ validator: isCusWxValidator("请选择来源渠道") }
					],
					"appoint_info.appoint_date": [
						{ required: true, message: "请选择预约到店日期时间" }
					],
					"appoint_info.cart_duration": [{ required: true, message: "请选择预约时长" }],

					"appoint_info.items": [{ required: true, message: "请选择待做服务" }],
					"appoint_info.deposit_info.pay_date": [
						{ required: true, message: "请选择下定金日期" }
					],
					"appoint_info.deposit_info.pay_type": [
						{ required: true, message: "请选择付款方式" }
					],
					"appoint_info.deposit_info.money": [{ required: true, message: "请选择定金金额" }],
					share_data: [{ required: true, message: "请上传客户凭证" }],
					cus_grade: [{ required: true, message: "请选择会员等级" }]
				},
				// companylist: [],
				sourceList: [],
				earList: [],
				reservList,
				introduceList: introduce,
				saving: false,
				backPath: "",
				cusTypeList: [
					{ label: "否", value: 0 },
					{ label: "是", value: 2 }
				],
				repeat: false
			};
		},
		computed: {
			bizRefData() {
				const { biz_id } = this.form;
				return this.getBizRefData(biz_id);
			},
			timeList() {
				let hour = 4;
				let list = [];
				for (let i = 1; i <= hour * 2; i++) {
					list.push({ value: i * 30, label: i / 2 + "小时" });
				}
				return list;
			}
		},
		created() {
			this.init();
		},
		beforeRouteEnter(to, from, next) {
			next((vm) => {
				vm.backPath = from.path;
			});
		},
		methods: {
			init() {
				const { form_type } = this.$route.query;
				this.repeat = form_type == "repeat";
				this.form.biz_id = this.getCurrBiz();
				this.initData();
				if (this.repeat) {
					this.getDetail();
				}
			},
			// 获取详情
			async getDetail() {
				const { cus_id, form_type } = this.$route.query;
				const { info } = await this.$service.customer.detail({
					cus_id,
					biz_id: 0
				});
				this.detail = info;
				Object.keys(this.form).forEach((key) => {
					info[key] != undefined && (this.form[key] = info[key]);
				});

				if (form_type == "repeat") {
					this.form.cus_type = 0;
					this.form.has_appoint = 0;
					this.form.first_shop = 0;
					this.form.inherit_id = cus_id;

					this.form.wechat_join_day = dayjs().format("YYYY-MM-DD");
				}
			},
			//添加服务
			addService() {
				this.$refs.reservRef.open();
			},
			//服务列表
			changeSelect(list) {
				this.form.appoint_info.items = list;
			},
			//删除服务
			delService(idx) {
				this.form.appoint_info.items.splice(idx, 1);
			},
			//提交
			submit() {
				this.$refs.formRuler.validate(async (valid, errors) => {
					this.showFormErr(errors);
					if (!valid) return;
					const { appoint_info, area, tag_name, ...args } = this.form;
					const { items } = appoint_info;
					let isEmpty = items.some((item) => item.price == "");
					if (isEmpty) {
						this.$message.warning("您有未补充服务信息");
						return;
					}
					this.saving = true;
					let form = {
						// cusId:args.cus_id,
						id_join_type:args.id_join_type,
						biz_id:args.biz_id,
						cus_type:args.cus_type,
						first_shop:args.first_shop,
						toto_shopShop: args.to_shop,
						bra_id: args.bra_id,
						dept_id: args.dept_id,
						cus_name: args.cus_name,
						cus_mobile: args.cus_mobile,
						cus_wx: args.cus_wx,
						cus_sex: args.cus_sex,
						wechat_join_day: args.wechat_join_day,
						share_type: args.share_type,
						source_id: args.source_id,
						has_appoint: args.has_appoint,
						share_data: args.share_data,
						cus_grade: args.cus_grade,
						cus_birthday: args.cus_birthday,
						cus_addr: args.cus_addr,
						add_remarks: args.add_remarks,
						appoint_date:appoint_info.appoint_date,
						cus_id:args.cus_id,
						from_cus_id: args.from_cus_id,
						// ...args,
						cus_area: area.toString(","),
						tag_name: tag_name.toString(","),
						appoint_info: {
							...appoint_info,
							items: items.map((v) => ({
								prod_id: v.si_id,
								prod_name: v.si_name,
								unit_price: v.price,
								buy_num: 1,
								is_experience: v.is_experience,
								is_presents: v.is_presents
							}))
						}
					};
					//显示转数组再转字符串
					let dateAll = appoint_info.appoint_date.split(' ')
					form.appoint_info.appoint_date = [dateAll[0], dateAll[1]].join();
					if (args.has_appoint && appoint_info.has_deposit) {
						let deposit = this.earList.find(
							(v) => v.deposit == appoint_info.deposit_info.money
						);
						form.appoint_info.deposit_info.deposit_num = deposit.deposit_num;
					}
					try {
						await this.$service.customer.add(form).done(() => {
							this.saving = false;
						});
						this.$store.commit("common/SET_CUS_FORM_SUBMIT", true);
						this.$message.success("操作成功");
						this.close();
					} catch (error) {
						if (!error.cus_id) return false;
						this.$store.commit("common/SET_CUS_FORM_SUBMIT", true);
						this.$message.success("添加重粉成功");
						this.close();
						// this.$confirm("该用户是重粉客户, 是否去新增重粉客户?", "提示", {
						// 	confirmButtonText: "确定",
						// 	cancelButtonText: "取消",
						// 	closeOnClickModal: false,
						// 	type: "warning"
						// }).then(() => {
						// 	this.$router.replace({
						// 		path: "/mobile/cus/form",
						// 		query: {
						// 			...error,
						// 			form_type: "repeat"
						// 		}
						// 	});

						// 	this.init();
						// });
					}
				});
			},
			close() {
				this.reset();
				this.$router.go(-1);
				// if (this.backPath) {
				// 	this.$router.replace({
				// 		path: this.backPath
				// 	});
				// } else {
				// 	this.$router.replace({
				// 		path: "/"
				// 	});
				// }
			},
			reset() {
				this.$refs.formRuler.resetFields();
				this.form.appoint_info.items = [];
			},
			validField(field) {
				this.$refs.formRuler.validateField(field);
			},
			initData() {
				this.getBizRelation();
			},
			//切换事业部
			changeBiz() {
				// this.getCompanys();
				this.getBizRelation();
			},
			getBizRelation() {
				// this.getBizRefCompany(biz_id);
				this.getBrand();
				this.getDeposits();
				this.getSource();
				// this.getLevelList();
				// this.getTagList();
			},
			changeBra() {
				this.getDeposits();
			},
			// 分公司
			// async getCompanys() {
			// 	const { biz_id } = this.form;
			// 	this.companylist = [];
			// 	if (!biz_id) return;
			// 	const data = await this.$service.company.list({
			// 		biz_id
			// 	});
			// 	this.companylist = data;
			// },
			//获取品牌
			async getBrand() {
				const { biz_id } = this.form;
				const data = await this.getBizRefBrand(biz_id);
				this.form.bra_id = data.length == 1 ? data[0]?.bra_id ?? "" : "";
			},
			//获取来源渠道
			async getSource() {
				const { biz_id } = this.form;
				this.sourceList = [];
				if (!biz_id) return;
				const data = await this.$service.source.list({ biz_id, type: 2, status: 1 });
				this.sourceList = data;
			},
			// 获取定金配置
			async getDeposits() {
				const { biz_id, bra_id } = this.form;
				this.earList = [];
				if (!biz_id) return;
				const list = await this.$service.config.depositList({ biz_id, bra_id });
				this.earList = list ?? [];
			},
			hasAppointChange() {
				this.form.appoint_info = {
					appoint_arrive: 0,
					appoint_date: "",
					has_deposit: 1,
					items: [],
					deposit_info: {
						pay_date: dayjs().format("YYYY-MM-DD"),
						pay_type: "",
						money: "",
						deposit_num: ""
					}
				};
			},
			hasDepositChange(v) {
				this.form.appoint_info.deposit_info = {
					pay_date: dayjs().format("YYYY-MM-DD"),
					pay_type: "",
					money: "",
					deposit_num: ""
				};
			},
			// 会员等级
			async getLevelList() {
				const { biz_id } = this.form;
				await this.getBizRefLevel(biz_id);
			},
			async getTagList() {
				const { biz_id } = this.form;
				const res = await this.$service.customer.tag({
					biz_id
				});
				this.tagList = res.lists;
			}
		}
	};
</script>

<style lang="scss" scoped>
	div {
		box-sizing: border-box;
	}
	.addcus-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.content {
			flex: 1;
			overflow: hidden auto;
			width: 100%;
			padding: 0 0 1.5rem;
			box-sizing: border-box;
			.com-title {
				box-sizing: border-box;
				padding: 0 0.3rem;
				height: 1rem;
				justify-content: space-between;
				align-items: center;
				background: #f3f3f3;
				&__left {
					align-items: center;
					.line {
						width: 0.04rem;
						height: 0.3rem;
						background: #156DFF;
					}
					span {
						font-size: 0.32rem;
						font-weight: 500;
						text-align: left;
						color: #156DFF;
						margin-left: 0.2rem;
						box-sizing: border-box;
					}
				}
				// &__right {
				// }
			}
			.pad-top {
				box-sizing: border-box;
				padding-top: 0.3rem;
				height: 1.3rem;
				margin-top: 0.3rem;
				position: relative;
				z-index: 9;
				width: 7.5rem;
				left: -0.3rem;
			}
			.form-info {
				// padding: 0 0 0.001px;
				background: #fff;
				.item-con {
					box-sizing: border-box;
					align-items: center;
					padding-bottom: 0.1rem;
					border-bottom: 1px solid #dfdfdf;
					.icon {
						color: #999;
					}
				}
				.place {
					height: 0.3rem;
				}
				.reserv {
					.reserv-item {
						justify-content: space-between;
						border-bottom: 1px solid #dfdfdf;
						padding-bottom: 0.3rem;
						margin-bottom: 0.3rem;
						box-sizing: border-box;

						&__left {
							flex: 1;
							align-items: center;
							.thumb {
								width: 0.88rem;
								height: 0.88rem;
								margin-right: 0.3rem;
								box-sizing: border-box;
								img {
									width: 100%;
									height: 100%;
									object-fit: cover;
								}
							}
							.name {
								width: 35%;
								font-size: 0.28rem;
								font-weight: 400;
								color: #333333;
								// &.mar-r {
								// 	margin-right: 0.99rem;
								// }
							}
							.price {
								border: 1px solid #dfdfdf;
								width: max-content;
								align-items: center;
								padding-left: 0.2rem;
								box-sizing: border-box;
								span {
									font-size: 0.28rem;
									font-weight: 400;
									color: #333333;
								}
								input {
									border: 0;
									width: 1.5rem;
								}
							}
						}
						&__right {
							align-items: center;
							i {
								font-size: 0.38rem;
								color: #dfdfdf;
							}
						}
					}
				}
				.add-serve {
					box-sizing: border-box;
					width: 3rem;
					height: 0.72rem;
					background: #156DFF;
					border-radius: 0.04rem;
					font-size: 0.24rem;
					color: #fff;
					justify-content: center;
					align-items: center;
					margin: 0 auto;
					span {
						font-weight: 400;
					}
					i {
						font-weight: bold;
						margin-right: 0.2rem;
					}
				}
			}
			.submit {
				box-sizing: border-box;
				display: block;
				width: calc(100% - 0.6rem);
				height: 0.88rem;
				border-radius: 0.08rem;
				font-size: 0.3rem;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				margin: 1rem auto 0;
			}
		}
	}
</style>
